<% extends "layout.html" %>
<% block main%>
<div class="album-content layui-container" id="layer-photos-demo">
    <div class="layui-field-box">
        <div class="layui-row">
            <div class="img-list">
                <div class="layui-fluid">
                    <div class="layui-row masonry space" id="img_list"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<% endblock %>
<% block script %>
    $('#<< idName >>').addClass('layui-this');
    util.fixbar({
        showHeight: 60
        ,css: function(){
          return {bottom: 75}
        }()
    });
    flow.load({
        elem: '#img_list' //指定列表容器
        ,isLazyimg:true
        ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
          var lis = [];
          //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从1开始返回）
          $.get('/getlist/<< key >>?page='+page, function(res){
            //假设你的列表返回在data集合中
            layui.each(res.data, function(index, item){
              if(item.type=='manhua'){
                lis.push('<a href="show/manhua/'+item.dirname+'"><div class="item"><p class="briefly">'+item.dirname+'</p></div></a>');
              }
              else{
                lis.push('<a href="show/girl_image/'+item.dirname+'"><div class="item"><img class="load" lay-src="/'+item.path+'"><p class="briefly">'+item.dirname+'</p></div></a>');
              }
            });
            //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
            //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
            next(lis.join(''), page < << count >>);
          });
        }
    });
<% endblock %>